$(function () {
  // 入驻歌手
  async function getInSinger(obj) {
    const res = await artist_list(obj)
    let result = res.data.artists
    singer_title(obj.name)
    result.forEach(async (item, index) => {
      $('.inSinger')[0].innerHTML += `
    <dl class="singer_dl f-thide" onclick="showModel()">
        <dt>
            <img src="${item.img1v1Url}?param=130y130" alt="" srcset="">
        </dt>
        <dd class="fx_sb">
            <div class="singer_name">${item.name}</div>
            <div class="singer_red"></div>
        </dd>
    </dl>      `
    })
  }

  // 热门歌手
  async function getHotSinger(offset = 0, limit = 40) {
    const res = await axios({
      url: `/top/artists`,
      method: 'get',
      data: {
        offset,
        limit
      }
    })
    let result = res.data.artists;
    singer_title('热门歌手')
    result.forEach((item, index) => {
      $('.inSinger')[0].innerHTML += `
        <dl class="singer_dl f-thide" onclick="showModel()">
            <dt>
                <img src="${item.picUrl}?param=130y130" alt="" srcset="">
            </dt>
            <dd class="fx_sb">
                <div class="singer_name">${item.name}</div>
                <div class="singer_red"></div>
            </dd>
        </dl>      `
    })
  }

  // 查看左侧选择的li标签
  $('.singer_left li').each(function (index, item) {
    item.onclick = function () {
      console.log(item.innerHTML)
      switch (item.innerHTML) {
        case '推荐歌手':
          getHotSinger()
          break;
        case '入驻歌手':
          getInSinger({name:'入驻歌手'})
          break;
        case '华语男歌手':
          getInSinger({name:'华语男歌手',type:1,area:7})
          break;
        case '华语女歌手':
          getInSinger({name:'华语女歌手',type:2,area:7})
          break;
        case '华语组合/乐队':
          getInSinger({name:'华语组合/乐队',type:3,area:7})
          break;
        case '欧美男歌手':
          getInSinger({name:'欧美男歌手',type:1,area:96})
          break;
        case '欧美女歌手':
          getInSinger({name:'欧美女歌手',type:2,area:96})
          break;
        case '欧美组合/乐队':
          getInSinger({name:'欧美组合/乐队',type:3,area:96})
          break;
        case '日本男歌手':
          getInSinger({name:'日本男歌手',type:1,area:8})
          break;
        case '日本女歌手':
          getInSinger({name:'日本女歌手',type:2,area:8})
          break;
        case '日本组合/乐队':
          getInSinger({name:'日本组合/乐队',type:3,area:8})
          break;
        case '韩国男歌手':
          getInSinger({name:'韩国男歌手',type:1,area:16})
          break;
        case '韩国女歌手':
          getInSinger({name:'韩国女歌手',type:2,area:16})
          break;
        case '韩国组合/乐队':
          getInSinger({name:'韩国组合/乐队',type:3,area:16})
          break;
        case '其他男歌手':
          getInSinger({name:'其他男歌手',type:1,area:0})
          break;
        case '其他女歌手':
          getInSinger({name:'其他女歌手',type:2,area:0})
          break;
        case '其他组合/乐队':
          getInSinger({name:'其他组合/乐队',type:3,area:0})
          break;
        default :
        break;
      }
      $('.singer_left li').each(function (index, item) {
        $(item).removeClass('singer_li_cl')
      })
      $(item).addClass('singer_li_cl')
    }
  })
  // 默认点击左侧第一个li
  $('.singer_left li')[0].click()
})

// /top/artists?offset=0&limit=30  热门歌手
// /toplist/artist  歌手榜  type : 地区1: 华语2: 欧美3: 韩国 4: 日本
// /artist/list?cat=1001&initial=b  歌手分类列表  入驻歌手 5001 华语男歌手 1001 华语女歌手 1002 华语组合/乐队 1003 欧美男歌手 2001 欧美女歌手 2002 欧美组合/乐队 2003 日本男歌手 6001 日本女歌手 6002 日本组合/乐队 6003 韩国男歌手 7001 韩国女歌手 7002 韩国组合/乐队 7003 其他男歌手 4001 其他女歌手 4002 其他组合/乐队 4003
// /artist/list `type` 取值: -1:全部 1:男歌手 2:女歌手 3:乐队  `area` 取值: -1:全部 7华语 96欧美 8:日本 16韩国 0:其他
async function artist_list(obj){
  let {limit = 40, offset = 0,name='入驻歌手',type=-1,area=-1}=obj
  const res = await axios({
    url: `/artist/list?limit=${limit}&offset=${offset}&type=${type}&area=${area}`,
    method: 'get'
  })
  return res
}
//切换榜名称
function singer_title(name) {
  $('.singer_right')[0].innerHTML = `
    <div class="singer_right_t fx_sb">
        <div class="singer_r_t_l">${name}</div>
        <div><a href="javascript:;">更多&gt;</a></div>
    </div>
    <div class="inSinger fx_sb">

    </div>   
    `
}

function showModel(){
  alert('点啥呢,后面的功能没有写！')
}


// <!-- 入驻歌手 -->
// <div class="singer_right_t fx_sb">
//     <div class="singer_r_t_l">入驻歌手</div>
//     <div><a href="javascript:;">更多&gt;</a></div>
// </div>
// <div class="inSinger fx_sb">
//     <!-- 入驻歌手列表 -->
// </div>

// <!-- 热门歌手 -->
// <div class="singer_right_t fx_sb">
//     <div class="singer_r_t_l">热门歌手</div>
//     <div><a href="javascript:;">更多&gt;</a></div>
// </div>
// <div class="hotSinger fx_sb">
//     <!-- 入驻歌手列表 -->
// </div>

// <!-- 歌手名字列表 -->
// <ul class="singerName fx_sb">
//     <!-- 列表 -->
// </ul>
